<template>
  <el-container direction="vertical">
    <el-main>
      <div class="row">
        <div class="col-md-4">
          <h1 style="margin-top: 40px;margin-bottom: 30px" class="bi-person-lines-fill"> 个人信息</h1>
          <p style="margin-bottom: 40px">查看修改你的信息</p>
          <div class="row justify-content-start feature">
            <el-card>
              <p>姓名</p>
              <el-input v-model="user.uname"></el-input>
              <p>手机号</p>
              <el-input v-model="user.utelephone"></el-input>
              <p>密码</p>
              <el-input show-password v-model="user.upassword"></el-input>
              <el-button type="primary" size="small" style="margin-top: 10px;float: right;margin-bottom: 10px" @click="changeInfo()">修改</el-button>
            </el-card>
          </div>
        </div>
        <div class="col-md-1"></div>
        <div class="col-md-7">
          <h1 style="margin-top: 40px;margin-bottom: 30px" class="bi-card-list"> 我的订单</h1>
          <p style="margin-bottom: 40px">查看管理你的订单</p>
          <div class="row">
            <el-card>
              <el-table :data="data">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item label="订单号"><span>{{props.row.oid}}</span></el-form-item>
                      <el-form-item label="商品名称"><span>{{props.row.gname}}</span></el-form-item>
                      <el-form-item label="店铺"><span>{{props.row.sname}}</span></el-form-item>
                      <el-form-item label="数量"><span>{{props.row.onumber}}</span></el-form-item>
                      <el-form-item label="单价"><span>{{props.row.gprice}}</span></el-form-item>
                      <el-form-item label="金额"><span>{{props.row.omoney}}</span></el-form-item>
                      <el-form-item label="日期"><span>{{props.row.odate}}</span></el-form-item>
                      <el-form-item label="收货地址"><span>{{props.row.olocal}}</span></el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="gname"></el-table-column>
                <el-table-column label="订单状态" prop="ostate"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-popconfirm title="删除该订单?" @confirm="deleteOrder(scope.row.oid)">
                      <el-button type="danger" size="small" slot="reference">删除</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";

export default {
  name: "Infos",
  data() {
    return{
      data:[],
      user:{
        uid:'',
        uname:'',
        utelephone:'',
        upassword:''
      },
      telephone:''
    }
  },
  methods:{
    deleteOrder(oid){
      axios.get('http://r44734h518.zicp.vip:41569/order/deleteOrder?oid='+oid).then(res=>{
        this.$notify.success("删除成功");
        axios.get('http://r44734h518.zicp.vip:41569/order/selectOrder?uid='+sessionStorage.getItem("uid")).then(res=>{
          this.data = res.data;
        })
      })
    },
    getUserInfo(){
      axios.get('http://r44734h518.zicp.vip:41569/user/selectUserByUid?uid='+sessionStorage.getItem("uid")).then(res=>{

        sessionStorage.setItem("uname",res.data.uname);
        sessionStorage.setItem("uid",res.data.uid);
        sessionStorage.setItem("utelephone",res.data.utelephone);
        sessionStorage.setItem("upassword",res.data.upassword);
        this.setUserInfo();
        console.log(res.data);
      })
    },
    setUserInfo(){
      this.user.uid = sessionStorage.getItem("uid");
      this.user.uname = sessionStorage.getItem("uname");
      this.user.utelephone = sessionStorage.getItem("utelephone");
      this.telephone = sessionStorage.getItem("utelephone");
      this.user.upassword = sessionStorage.getItem("upassword");
    },
    changeInfo(){
      if (this.user.uname==="") {
        this.$message.error("用户名不能为空");
      } else if (this.user.utelephone===""){
        this.$message.error("手机号不能为空");
      } else if (this.user.utelephone.length!==11){
        this.$message.error("手机号格式错误");
      } else if (this.user.upassword===""){
        this.$message.error("密码不能为空");
      } else if (this.user.utelephone === this.telephone){
        axios.post('http://r44734h518.zicp.vip:41569/user/updateUser',this.user).then(res=>{
          this.$message.success("修改成功");
          this.getUserInfo();
        })
      } else {
        axios.get('http://r44734h518.zicp.vip:41569/user/selectUserByT?utelephone='+this.user.utelephone).then(res=>{
          if (res.data ===null ){
            axios.post('http://r44734h518.zicp.vip:41569/user/updateUser',this.user).then(res=>{
              this.$message.success("修改成功");
              this.getUserInfo();
            })
          } else {
            this.$message.error("该手机号被注册");
          }
        })
      }
    }
  },
  created() {
    axios.get('http://r44734h518.zicp.vip:41569/order/selectOrder?uid='+sessionStorage.getItem("uid")).then(res=>{
      this.data = res.data;
    })
    this.setUserInfo();
  },
  beforeCreate() {
    if (sessionStorage.getItem("isLogin") === null){
      this.$message.warning("请先登录");
      this.$router.push({path:'/login'});
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
